<template>
    <div>
        <div class="home">
            <div class="left">
                <Drawer placement="left" :closable="false" v-model="value2">
                    
                    <div class="head-img">
                        <img @click="personal" src="../assets/images/avatar/avatar1.jpg" />
                        <p class="fullname">测试</p>
                        <div class="config">
                            <Icon type="logo-yen" />
                            <p>钱包</p> 
                        </div>
                        <div class="config">
                            <Icon type="md-folder" />
                            <p>文件</p> 
                        </div>
                        <div class="config">
                            <Icon type="ios-bookmarks" />
                            <p>收藏</p> 
                        </div>
                        <div class="config">
                            <Icon type="md-images" />
                            <p>相册</p> 
                        </div>
                        <div class="config">
                            <Icon type="md-color-palette" />
                            <p>个性装扮</p> 
                        </div>
                        <div class="config" @click="login">
                            <Icon type="md-log-in" />
                            <p>切换账号</p> 
                        </div>
                    </div>
                </Drawer>
            </div>
            <div class="header">
                <img @click="value2 = true" src="../assets/images/login.jpg" />
                <div class="title">{{ title }}</div>
                <Icon class="add" v-show="contacts" type="md-person-add" :size="25" title="添加" @click="add(1)" />
                <Icon class="add" v-show="dynamic" type="md-add-circle" :size="25" title="发动态" @click="add(2)" />
            </div> 
            <div class="content">
                <div v-show="message" class="con-message">
                    <div class="message1">
                        <Scroll :on-reach-bottom="handleReachBottom">
                            <Dropdown trigger="contextMenu">
                                <img src="../assets/images/login.jpg" />
                                <div class="details">
                                    <div class="left">
                                        <p class="top">测试</p>
                                        <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                    </div>
                                    <div class="right">20:30</div>
                                </div>
                                <DropdownMenu slot="list">
                                    <DropdownItem>返回</DropdownItem>
                                    <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>

                            <Dropdown trigger="contextMenu">
                                <img src="../assets/images/login.jpg" />
                                <div class="details">
                                    <div class="left">
                                        <p class="top">测试</p>
                                        <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                    </div>
                                    <div class="right">20:30</div>
                                </div>
                                <DropdownMenu slot="list">
                                    <DropdownItem>返回</DropdownItem>
                                    <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>

                            <Dropdown trigger="contextMenu">
                                <img src="../assets/images/login.jpg" />
                                <div class="details">
                                    <div class="left">
                                        <p class="top">测试</p>
                                        <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                    </div>
                                    <div class="right">20:30</div>
                                </div>
                                <DropdownMenu slot="list">
                                    <DropdownItem>返回</DropdownItem>
                                    <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>

                            <Dropdown trigger="contextMenu">
                                <img src="../assets/images/login.jpg" />
                                <div class="details">
                                    <div class="left">
                                        <p class="top">测试</p>
                                        <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                    </div>
                                    <div class="right">20:30</div>
                                </div>
                                <DropdownMenu slot="list">
                                    <DropdownItem>返回</DropdownItem>
                                    <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>

                            <Dropdown trigger="contextMenu">
                                <img src="../assets/images/login.jpg" />
                                <div class="details">
                                    <div class="left">
                                        <p class="top">测试</p>
                                        <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                    </div>
                                    <div class="right">20:30</div>
                                </div>
                                <DropdownMenu slot="list">
                                    <DropdownItem>返回</DropdownItem>
                                    <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </Scroll>
                    </div>
                </div>
                <div v-show="contacts" class="con-contacts">
                    <Collapse>
                        <Panel name="1">
                            史蒂夫·乔布斯
                            <div class="contacts1" slot="content">
                                 <Dropdown trigger="contextMenu" style="margin-left: 20px">
                                    <img src="../assets/images/login.jpg" />
                                    <div class="details">
                                        <div class="left">
                                            <p class="top">测试</p>
                                            <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                        </div>
                                    </div>
                                    <DropdownMenu slot="list">
                                        <DropdownItem>返回</DropdownItem>
                                        <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>

                                <Dropdown trigger="contextMenu" style="margin-left: 20px">
                                    <img src="../assets/images/login.jpg" />
                                    <div class="details">
                                        <div class="left">
                                            <p class="top">测试</p>
                                            <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                        </div>
                                    </div>
                                    <DropdownMenu slot="list">
                                        <DropdownItem>返回</DropdownItem>
                                        <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </div>
                        </Panel>
                        <Panel name="2">
                            斯蒂夫·盖瑞·沃兹尼亚克
                            <div class="contacts1" slot="content">
                                 <Dropdown trigger="contextMenu" style="margin-left: 20px">
                                    <img src="../assets/images/login.jpg" />
                                    <div class="details">
                                        <div class="left">
                                            <p class="top">测试</p>
                                            <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                        </div>
                                    </div>
                                    <DropdownMenu slot="list">
                                        <DropdownItem>返回</DropdownItem>
                                        <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>

                                <Dropdown trigger="contextMenu" style="margin-left: 20px">
                                    <img src="../assets/images/login.jpg" />
                                    <div class="details">
                                        <div class="left">
                                            <p class="top">测试</p>
                                            <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                        </div>
                                    </div>
                                    <DropdownMenu slot="list">
                                        <DropdownItem>返回</DropdownItem>
                                        <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </div>
                        </Panel>
                        <Panel name="3">
                            乔纳森·伊夫
                            <div class="contacts1" slot="content">
                                 <Dropdown trigger="contextMenu" style="margin-left: 20px">
                                    <img src="../assets/images/login.jpg" />
                                    <div class="details">
                                        <div class="left">
                                            <p class="top">测试</p>
                                            <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                        </div>
                                    </div>
                                    <DropdownMenu slot="list">
                                        <DropdownItem>返回</DropdownItem>
                                        <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>

                                <Dropdown trigger="contextMenu" style="margin-left: 20px">
                                    <img src="../assets/images/login.jpg" />
                                    <div class="details">
                                        <div class="left">
                                            <p class="top">测试</p>
                                            <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                        </div>
                                    </div>
                                    <DropdownMenu slot="list">
                                        <DropdownItem>返回</DropdownItem>
                                        <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </div>
                        </Panel>
                    </Collapse>
                </div>
                <div v-show="dynamic" class="con-dynamic">
                    <Scroll :on-reach-bottom="handleReachBottom">
                        <div style="background:#eee;padding: 20px">
                            <Card :bordered="false">
                                <p slot="title">
                                    <img src="../assets/images/login.jpg" />
                                    No border title（20:18）
                                </p>
                                <p>Content of no border type. Content of no border type. Content of no border type. Content of no border type. </p>
                            </Card>
                        </div>

                        <div style="background:#eee;padding: 20px">
                            <Card :bordered="false">
                                <p slot="title">
                                    <img src="../assets/images/login.jpg" />
                                    No border title（20:18）
                                </p>
                                <p>Content of no border type. Content of no border type. Content of no border type. Content of no border type. </p>
                            </Card>
                        </div>

                        <div style="background:#eee;padding: 20px">
                            <Card :bordered="false">
                                <p slot="title">
                                    <img src="../assets/images/login.jpg" />
                                    No border title（20:18）
                                </p>
                                <p>Content of no border type. Content of no border type. Content of no border type. Content of no border type. </p>
                            </Card>
                        </div>
                    </Scroll>
                </div>
                <div v-show="addPeople" class="add-people">
                    <AutoComplete
                        v-model="value1"
                        :data="data1"
                        icon="ios-search"
                        @on-search="handleSearch"
                        @on-blur="search"
                        placeholder="input here"
                        style="width:310px;margin-top:10px;margin-left:5px;">
                    </AutoComplete>
                    <div class="message1">
                        <Scroll :on-reach-bottom="handleReachBottom">
                            <Dropdown trigger="contextMenu">
                                <div @click="details()">
                                    <img src="../assets/images/login.jpg" />
                                    <div class="details">
                                        <p class="top">测试</p>
                                        <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                    </div>
                                </div>
                            </Dropdown>

                            <Dropdown trigger="contextMenu">
                                <div @click="details()">
                                    <img src="../assets/images/login.jpg" />
                                    <div class="details">
                                        <p class="top">测试</p>
                                        <p class="con">只能先看着你先看看从深层次删除删除测试测试</p>
                                    </div>
                                </div>
                            </Dropdown>
                        </Scroll>
                    </div>
                </div>
                <div v-show="addMessage" class="add-message">
                    <Form :model="formItem" :label-width="40">
                        <FormItem label="说说">
                            <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 10,maxRows: 5}" placeholder="请写下您当前的心情..."/>>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="issueMessage()">发布</Button>
                            <Button style="margin-left: 8px" @click="cancelMessage()">返回</Button>
                        </FormItem>
                    </Form>
                </div>    
            </div>
            <div class="bottom">
                <ul class="nav-out">
                    <li class="messsage" @click="cutTabClick(1)" :class="{active: activeIndex == 1}">
                        <Icon type="md-chatboxes" />
                        <p>消息</p>
                    </li>
                    <li class="contacts" @click="cutTabClick(2)" :class="{active: activeIndex == 2}">
                        <Icon type="md-contacts" />
                        <p>联系人</p>
                    </li>
                    <li class="dynamic" @click="cutTabClick(3)" :class="{active: activeIndex == 3}">
                        <Icon type="md-star" />
                        <p>动态</p>
                    </li>
                </ul>
            </div> 
        </div>
    </div> 
</template>
<script>
  export default {
    data () {
      return {
        value2: false,
        name: 'message',
        message: true,
        contacts: false,
        dynamic: false,
        addMessage: false,
        addPeople: false,
        activeIndex: 1,
        formItem: {
          textarea: ''
        },
        title: '消息',
        value1: '',
        data1: []
      }
    },
    methods: {
      // 添加
      add (index) {
        if (index === 1) {
          this.activeIndex = 2
          this.message = false
          this.contacts = false
          this.dynamic = false
          this.addMessage = false
          this.addPeople = true
          this.title = '添加'
        }
        if (index === 2) {
          this.activeIndex = 3
          this.message = false
          this.contacts = false
          this.dynamic = false
          this.addMessage = true
          this.addPeople = false
          this.title = '发说说'
        }
      },
      // 登陆
      login () {
        this.$router.push({path: '/'})
      },
      // 切换
      cutTabClick (index) {
        if (index === 1) {
          this.activeIndex = 1
          this.message = true
          this.contacts = false
          this.dynamic = false
          this.addMessage = false
          this.addPeople = false
          this.title = '消息'
        }
        if (index === 2) {
          this.activeIndex = 2
          this.message = false
          this.contacts = true
          this.dynamic = false
          this.addMessage = false
          this.addPeople = false
          this.title = '联系人'
        }
        if (index === 3) {
          this.activeIndex = 3
          this.message = false
          this.contacts = false
          this.dynamic = true
          this.addMessage = false
          this.addPeople = false
          this.title = '动态'
        }
        console.log(this.tltle)
      },
      // 无线滚动
      handleReachBottom () { },
      // 跳转个人信息
      personal () {
        this.value2 = false
        this.$router.push({path: '/personal'})
      },
      // 发布说说
      issueMessage (res = false) {
        if (res === true) {
          this.$Notice.success({
            title: '发布成功！',
            desc: '',
            duration: 1
          })
          this.activeIndex = 3
          this.message = false
          this.contacts = false
          this.dynamic = true
          this.addMessage = false
          this.addPeople = false
        } else {
          this.$Notice.error({
            title: '发布失败',
            desc: '',
            duration: 1
          })
        }
      },
      // 取消发布
      cancelMessage () {
        this.activeIndex = 3
        this.message = false
        this.contacts = false
        this.dynamic = true
        this.addMessage = false
        this.addPeople = false
      },
      // 补全搜索
      handleSearch (value) {
        this.data1 = !value ? [] : [
          value,
          value + value,
          value + value + value
        ]
      },
      // 搜索
      search (value) {
        console.log(123)
      },
      // 搜索的个人详情
      details (value) {
        this.$router.push({path: '/personal'})
      }
    }
  }
</script>

<style lang="less">
    .home{
        width: 320px;
        height: 540px;
        background-color: #fff;

        .header{
            width: 100%;
            height: 40px;
            background-color: #2d8cf0;
            color: #fff;
            img{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                float: left;
                margin-left: 10px;
                margin-top: 5px;
            }
            .title{
                width: 240px;
                height: 40px;
                line-height: 40px;
                float: left;
                text-align: center;
                font-size: 16px;
            }
            .add{
                float: right;
                margin-right: 10px;
                line-height: 40px;
            }
        }
        .content{
            background-color: #f1f1f1;
            height: 500px;
            .con-message{
                height: 500px;
                background-color: #fff;
                .ivu-scroll-container{
                    height: 440px !important;
                    &::-webkit-scrollbar {
                        display: none;
                    }
                }
                .message1{
                    width: 320px;
                    height: 50px;
                    padding: 5px;
                    .ivu-dropdown{
                        height: 40px;
                        margin-bottom: 10px;
                    }
                    .ivu-dropdowna:hover{
                        background-color: red;
                    }
                    img{
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        float: left;
                        box-shadow: 0 0 #666;
                    }
                    .details{
                        width: 240px;
                        height: 40px;
                        margin-left: 20px;
                        float: left;
                        .left{
                            width: 180px;
                            height: 40px;
                            float: left;
                            p{
                                height: 20px;
                                line-height: 20px;
                            }
                            .top{
                                font-weight: 900;
                                color: #333;
                            }
                            .con{
                                overflow: hidden;
                                text-overflow:ellipsis;
                                white-space: nowrap;
                            }
                        }
                        .right{
                            width: 60px;
                            height: 40px;
                            line-height: 40px;
                            text-align: right;
                            float: right;
                        }
                    }
                }
            }
            .con-contacts{
                height: 440px;
                overflow-y: auto;
                &::-webkit-scrollbar {
                    display: none;
                }
                .contacts1{
                    width: 286px;
                    height: auto;
                    padding: 5px;
                    background-color: #fff;
                    .ivu-dropdown{
                        margin-left: 0 !important;
                        height: 40px;
                    }
                    img{
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        float: left;
                        box-shadow: 0 0 #666;
                    }
                    .details{
                        width: 220px;
                        height: 40px;
                        margin-left: 10px;
                        float: left;
                        .left{
                            width: 180px;
                            height: 40px;
                            float: left;
                            p{
                                height: 20px;
                                line-height: 20px;
                            }
                            .top{
                                font-weight: 900;
                                color: #333;
                            }
                            .con{
                                overflow: hidden;
                                text-overflow:ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }
                }
            }
            .con-dynamic{
                height: 500px;
                .ivu-scroll-container{
                    height: 440px !important;
                    &::-webkit-scrollbar {
                        display: none;
                    }
                }
                img{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    float: left;
                    margin-right: 10px;
                }
            }
            .add-people{
                width: 320px;
                height: 440px;
                background-color: #fff;
                .ivu-scroll-container{
                    height: 440px !important;
                    &::-webkit-scrollbar {
                        display: none;
                    }
                }
                .message1{
                    width: 320px;
                    height: 50px;
                    padding: 5px;
                    .ivu-dropdown{
                        height: 40px;
                        margin-bottom: 10px;
                    }
                    .ivu-dropdowna:hover{
                        background-color: red;
                    }
                    img{
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        float: left;
                        box-shadow: 0 0 #666;
                    }
                    .details{
                        width: 240px;
                        height: 40px;
                        margin-left: 20px;
                        float: left;
                        p{
                            height: 20px;
                            line-height: 20px;
                        }
                        .top{
                            font-weight: 900;
                            color: #333;
                        }
                        .con{
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
            }
            .add-message{
                width: 320px;
                height: 440px;
                padding: 10px;
            }
        }
        .bottom{
            position: fixed;
            left: 0;
            bottom: 0;
            height: 60px;
            box-shadow: 0 -2px 0 #e1e1e1;
            background-color: #fff;
            ul{
                height: 60px;
                li{
                    width: 106px;
                    height: 60px;
                    float: left;
                    text-align: center;
                    list-style:none;
                    color: rgb(122, 121, 121);
                    font-weight: 900;
                    .ivu-icon{
                        margin-top: 7px;
                        font-size: 28px;
                    }
                }
                .active{
                   color: #2d8cf0; 
                }
            }
           
        }
    }    
    .ivu-drawer-content{
        background-image: url('../assets/images/timg9.jpg');
        background-repeat:no-repeat;
        background-size:256px 540px;
    }
    .head-img{
        width: 100%;
        height: 100%;
        img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 10px 72px;
        }
        .fullname{
            text-align: center;
            color: #fff;
            font-size: 16px;
            margin-bottom: 40px;
        }
        .config{
            width: 100%;
            height: 50px;
            color: #fff;
            .ivu-icon{
                font-size: 18px;
                margin-left: 20px;
                margin-top: -6px;
            }
            p{
                display: inline;
                font-size: 18px;
                line-height: 50px;
                margin-left: 30px;
            }
        }
    }
    .ivu-notice{
        width: 240px !important; 
        margin-top: 40px !important; 
    }
</style>

